<template>
	<view class="message base-maxwidth">
		<nav-top 
			:back="back"
			:topHeight="topHeight"
			:topBackgroundColor="topBackgroundColor"
			:topMainBackGroundColor="topMainBackGroundColor">
			<view class="input-container">
				<uni-easyinput v-model="inputValue" placeholder="请输入" @click="inputOnclik" :suffixIcon="suffixIcon"/>
			</view>
		</nav-top>
		<view class="menu-list">
			<view class="item like-menu"><image class="img" src="@/static/images/message/like_icon.png" mode="aspectFit"></image><text>赞</text></view>
			<view class="item fans-menu"><image class="img" src="@/static/images/message/friend_icon.png" mode="aspectFit"></image><text>新增粉丝</text></view>
			<view class="item comment-menu"><image class="img" src="@/static/images/message/comment_icon.png" mode="aspectFit"></image><text>评论</text></view>
		</view>
		<view class="user-list">
			<user-list :userList="userList"></user-list>
		</view>
	</view>
</template>

<script>
	import navTop from '@/components/topnav/topNav.vue'
	import userList from '@/components/userList/userList.vue'
	export default {
		components: {
			navTop,
			userList
		},
		data() {
			return {
				back: {
					show: false
				},
				topHeight: 50,
				topBackgroundColor: '#fff',
				topMainBackGroundColor: '#fff',
				inputValue: '',
				suffixIcon: 'search',
				userList: [
					{
						userID: 1,
						avatar: 'https://pic2.zhimg.com/80/v2-cef1bd681556b3352f3b8bea15d4e0fd_720w.webp',
						username: 'Gigibang',
						message: '你在干啥',
						send_time: '09:25',
						unread_num: 2
					},
					{
						userID: 2,
						avatar: 'https://pic3.zhimg.com/80/v2-911318ac58f4d15608e6b20a94834c3a_720w.webp',
						username: '撸串研究生',
						message: '别骗自己了',
						send_time: '21:5',
						unread_num: 5
					},
					{
						userID: 3,
						avatar: 'https://pic3.zhimg.com/80/v2-285a104b2e557836ca09a386e6ee73d2_720w.webp',
						username: '不解风情的老妖怪',
						message: '你来不及了',
						send_time: '21:31',
						unread_num: 0
					},
					{
						userID: 5,
						avatar: 'https://pic1.zhimg.com/80/v2-c29322edcd03ead5207049b44abad0d8_720w.webp',
						username: '马云背后的女人',
						message: '学不完的',
						send_time: '21:32',
						unread_num: 10
					},
					{
						userID: 6,
						avatar: 'https://pic1.zhimg.com/80/v2-658f5a09bba68f9643a919413c0558b0_720w.webp',
						username: '发呆业务爱好者',
						message: '月薪3k',
						send_time: '21:30',
						unread_num: 1
					},
					{
						userID: 14,
						avatar: 'https://pic4.zhimg.com/80/v2-0ccb3da25894d310141ba668f3dafa77_720w.webp',
						username: '迪士尼在逃公主',
						message: '~',
						send_time: '21:30',
						unread_num: 0
					},
					{
						userID: 8,
						avatar: 'https://pic3.zhimg.com/v2-3138a81b743c0b9c2c792c61f0f016c6_r.jpg',
						username: '退役熬夜选手',
						message: '我只是发条信息',
						send_time: '21:30',
						unread_num: 1
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		background-color: #f8f8f8;
		height: 100vh;
	}
	
	.content {
		width: 100vw;
		background-color: #f8f8f8;
		margin: 0 0 0 -20rpx;
	}
	
	.input-container {
		margin-left: 20rpx;
		width: 66.6vw;
		background: linear-gradient();
		border-radius: 24rpx;
	}
	
	/deep/.input-container {
		// height: 25px;
		.is-input-border {
			height: 32px;
			border-radius: 24rpx!important;
		}
	}
	
	.menu-list {
		display: flex;
		width: 100%;
		justify-content: space-evenly;
		padding-bottom: 15px;
		background-color: #fff;
		// margin-bottom: 15px;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// width: ;
			width: 140rpx;
			height: 140rpx;
			font-size: 12px;
			.img {
				width: 60%;
			}
			
		}
	}
	.user-list {
		width: 100vw;
		// height: 100%;
		margin-left: -20rpx;
		padding-top: 8px;
	}
</style>